import './index.scss'
import React, {useCallback, useMemo, useState, useRef, useEffect} from 'react';
import {Input, Descriptions, Table, Button} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { TableRowSelection } from 'antd/es/table/interface';
import {Link} from 'react-router-dom'
interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}



const data: DataType[] = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `${i+1}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

const ASN = () => {
  const [update, setUpdate] = useState<boolean>(false);
  const jump = useCallback((text:string) => {

  },[])
  const columns: ColumnsType<DataType> = useMemo(() => [
    {
      title: 'ASN',
      dataIndex: 'name',
      fixed: 'left',
      render: (text) => {
        return <Link to={{pathname:'/home/ASNDetail'}}><div onClick={() => jump(text)}>{text}</div></Link>
      }
    },
    {
      title: '状态',
      dataIndex: 'age',
    },
    {
      title: '入库类型',
      dataIndex: 'address',
    },
    {
      title: '货主',
      dataIndex: 'address',
    },
    {
      title: '客户单号',
      dataIndex: 'address',
    },
    {
      title: '供应商编码',
      dataIndex: 'address',
    },
    {
      title: '供应商名称',
      dataIndex: 'address',
    },
    {
      title: '货箱已出货',
      dataIndex: 'address',
    },
    {
      title: '货箱已收货',
      dataIndex: 'address',
    },{
      title: '已收数量',
      dataIndex: 'address',
    },
    {
      title: '收货时间',
      dataIndex: 'address',
    },
    {
      title: '预计到货时间',
      dataIndex: 'address',
    },
  ],[])

  const formData = useRef<Record<string, string>>({});
  const labelList = useMemo(() => [
    {id:1,label:'ASN单号'},
    {id:2,label:'客户单号'},
    {id:3,label:'状态始于'},
    {id:4,label:'状态终于'},
    {id:5,label:'收货日期'},
    {id:6,label:'SKU编码'},
    {id:7,label:'SKU说明'},
    {id:8,label:'货主'},
    {id:9,label:'计划收货日期'},
    {id:10,label:'批号'},
    {id:11,label:'供货商编码'},
    {id:12,label:'供应商名称'},
  ], []);

  const handleChange = useCallback((data: Record<string, string>) => {
    formData.current = {...formData.current, ...data}
  }, []);

  useEffect(()=> {
    formData.current = {};
  }, [update])

  const listItem = useMemo(() => labelList.map((v, index: number) => (
    <Descriptions.Item label={v.label} key={new Date().getTime()}>
      <Input placeholder="请输入" onChange={(e) => handleChange({[v.label]: e.target.value})} />
    </Descriptions.Item>
  )), [update])
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const onSelectChange = useCallback((newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys);
  }, []);

  const rowSelection: TableRowSelection<DataType> = useMemo(() => ({
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      {
        key: 'odd',
        text: 'Select Odd Row',
        onSelect: (changableRowKeys) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            return index % 2 === 0;

          });
          setSelectedRowKeys(newSelectedRowKeys);
        },
      },
      {
        key: 'even',
        text: 'Select Even Row',
        onSelect: (changableRowKeys) => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            return index % 2 !== 0;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        },
      },
    ],
  }), [selectedRowKeys]);

  return <div className='ASN'>
    <div className='form-box'>
      <div className='form-contain'>
        <Descriptions
          bordered
          column={{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }}
          labelStyle={{backgroundColor:'#F5F5F5'}}
        >
          {listItem}
        </Descriptions>
        <div className='button-box'>
          <button onClick={() => setUpdate(!update)}> 重置</button>
          <button onClick={() => console.log(formData.current)}> 查询</button>
        </div>
      </div>
    </div>
    <div className='table-box form-box'>
      <div className='table-contain'>
        <div className='table-button-box'>
          <button type='button'> 打开ASN</button>
          <button type='button'> 关闭ASN</button>
          <button type='button'> 导出ASN</button>
          <button type='button'> 打印商品条码</button>
          <button type='button'> 打印收货验收单</button>
        </div>
        <Table rowSelection={rowSelection} columns={columns} dataSource={data} />;
      </div>
    </div>
  </div>;
};
export default ASN;
